import React, { useEffect, useState } from "react";
import {
  Button,
  Carousel,
  Input,
  Select,
  Popover,
  Space,
  Modal,
  Cascader,
  CascaderProps,
} from "antd";
import "./index.css";
import {
  ArrowUpOutlined,
  BookOutlined,
  BorderOutlined,
  CustomerServiceOutlined,
  DesktopOutlined,
  DownOutlined,
  FormOutlined,
  MacCommandOutlined,
  MailOutlined,
  MobileOutlined,
  NodeIndexOutlined,
  OpenAIOutlined,
  PictureOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
  QuestionOutlined,
  ReadOutlined,
  RetweetOutlined,
  SearchOutlined,
  ShoppingOutlined,
  SignatureOutlined,
  SmileOutlined,
  TranslationOutlined,
  UpOutlined,
} from "@ant-design/icons";
import axios from 'axios';
import { useNavigate } from "react-router-dom";
// 引入图片
import logo from './二维码.png'
import logo2 from './二维码2.png'

// 引入组件
import PROMOTION from "../../components/PROMOTION/PROMOTION";
import Marketing from '../../components/Shuju/Marketing.js';
import promotionData from "../../components/Shuju/promotionData.js";
import Sciencepopularizationguide from '../../components/Shuju/Sciencepopularizationguide.js';
import Lifestyleandentertainment from '../../components/Shuju/Lifestyleandentertainment.js';
import Expandingcustomerbaseandattractingtraffic from '../../components/Shuju/Expandingcustomerbaseandattractingtraffic.js';
import Enterpriseadministration from '../../components/Shuju/Enterpriseadministration.js';
import NoticeAnnouncement from '../../components/Shuju/NoticeAnnouncement.js';
import Goodnewswarreport from '../../components/Shuju/Goodnewswarreport.js';

// 日历
import YourComponent from '../../components/Calendar/Calendar.js';

// 搜索
import SearchBox from '../../components/YourComponent/YourComponent.js'

// 图片懒加载
import LazyImage from "../../components/LazyImage/LazyImage.js";

const { Option } = Select;

const selectAfter = (
  <Select defaultValue="稿定模版">
    <Option value="稿定模版">稿定模版</Option>
    <Option value="素材下载">素材下载</Option>
  </Select>
);

const contentStyle: React.CSSProperties = {
  height: "100px",
  color: "#fff",
  lineHeight: "100px",
  textAlign: "center",
  background: "#364d79",
};

const images = [
  {
    description: "海报",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/99585/0794dd1b-5f16-4970-8202-5055769072e343109.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "LOGO",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/30044/104ad3c8-57d9-42c0-918b-488363fa1af2115149.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "公众号首图",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/53357/bd4a6353-ccd0-4fca-bf1c-8783312b3a4973113.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "PPT模版",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/78925/2d942775-d9e6-47e5-b6a0-b8623e6d558e66724.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "长图海报",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/53357/90934d80-96b3-4f71-9f02-e8c4e04a490a16501.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "小红书配图",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/53357/fc1c80cc-37f7-4b64-921f-67a90641af4237556.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "小红书封面",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/0/b37f38a1-2881-4d8e-8f04-1856ff03bc752236813.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "商品主图",
    src: "https://gd-filems.dancf.com/gaoding/gaoding/15004/39617373-5990-41b4-9671-475d2eceec2512292.jpg?x-oss-process=image/resize,h_104,type_6/sharpen,120/interlace,1/format,webp",
  },
  {
    description: "文章长图",
    src: "https://img2.baidu.com/it/u=413609647,3888898077&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=542",
  },
  {
    description: "公众号次图",
    src: "https://img2.baidu.com/it/u=1852693990,652310483&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=788",
  },
  {
    description: "视频模版",
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201903%2F07%2F20190307114643_ovxdt.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1728825889&t=bfd14bb70ad07e2141a63f87dff8d088",
  },
  {
    description: "横版海报",
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201910%2F12%2F20191012080606_dihpj.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1728825890&t=66f82e95e7de049acbe4cade4411ea3c",
  },
  {
    description: "视频封面",
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F25%2F20210725231928_3afe0.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1728826476&t=45e5d3b7f37f96c8e379185e7dd44741",
  },
  {
    description: "全屏海报",
    src: "https://img1.baidu.com/it/u=3359639651,216598339&fm=253&fmt=auto&app=138&f=JPEG?w=991&h=500",
  },
  {
    description: "详情页",
    src: "https://img2.baidu.com/it/u=1118965395,3979469816&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889",
  },
  {
    description: "主图图标",
    src: "https://img0.baidu.com/it/u=4001774142,2771989059&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
  },
  {
    description: "电商竖版海报",
    src: "https://img0.baidu.com/it/u=3122129513,456884282&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=723",
  },
  {
    description: "动态海报",
    src: "https://piccn.ihuaben.com/pic/image/202107/2611/1627269705898-Mpo037bDW7_370-266.gif?x-oss-process=image/resize,w_640",
  },
  {
    description: "二维码",
    src: "https://img2.baidu.com/it/u=960873654,1461177529&fm=253&fmt=auto&app=138&f=PNG?w=519&h=500",
  },
  {
    description: "壁纸",
    src: "https://img0.baidu.com/it/u=2892995670,2843867876&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
  },
  // 这里可以继续添加更多的图片对象
];

interface DataType {
  key: string;
  id: string;
  name: string;
  tel: string;
  word: string;
  state: string;
  img: string;
  datetime: string;
}

const content = (
  <div>
    <img src={ logo2 } alt="" />
    <p style={{ textAlign:'center' }}>扫码下载手机 APP</p>
  </div>
);

const contents = (
  <div>
    <img src={ logo } alt="" />
    <p style={{ textAlign:'center' }}>扫码添加小程序</p>
  </div>
);

const gongneng = (
  <div>
    <ul>
    <li><a href="">手机海报设计</a></li>
    <li><a href="">名片设计</a></li>
    <li><a href="">插画设计</a></li>
    <li><a href="">菜单制作</a></li>
    <li><a href="">PPT模版设计</a></li>
    <li><a href="">手机壁纸设计</a></li>
    <li><a href="">公众号素材</a></li>
    <li><a href="">宣传单设计</a></li>
    <li><a href="">邀请函设计</a></li>
    <li><a href="">日签设计</a></li>
    </ul>
  </div>
);

const youqing = (
  <div style={{ height:'100px',overflowY:'scroll' }}>
    <ul>
    <li><a href="">稿定Pro</a></li>
    <li><a href="">稿定设计</a></li>
    <li><a href="">在线图片编辑</a></li>
    <li><a href="">证件照换底色</a></li>
    <li><a href="">有声小说</a></li>
    <li><a href="">学营销运营</a></li>
    <li><a href="">抠图</a></li>
    <li><a href="">更多友情链接</a></li>
    </ul>
  </div>
);

interface Option {
  value: string;
  label: string;
  children?: Option[];
}

const options: Option[] = [
  {
    value: 'px(像素)',
    label: 'px',
  },
  {
    value: 'cm(厘米)',
    label: 'cm',
  },
   {
    value: 'mm(毫米)',
    label: 'mm',
  },
];

const onChange: CascaderProps<Option>['onChange'] = (value) => {
  console.log(value);
};

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleLeftClick = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 4);
    }
  };

  const handleRightClick = () => {
    if (currentIndex < images.length - 1) {
      setCurrentIndex(currentIndex + 4);
    }
  };

  // 监听滚动事件
  const [activeTab, setActiveTab] = useState("今日推荐");
  const [currentIndexs, setCurrentIndexs] = useState(0);

  const handleLeftClicks = () => {
    if (currentIndexs > 0) {
      setCurrentIndexs(currentIndexs - 5);
    }
  };

  const handleRightClicks = () => {
    if (currentIndexs < images.length - 1) {
      setCurrentIndexs(currentIndexs + 5);
    }
  };

  // Tab切换处理函数
  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    // 这里可以添加切换Tab的逻辑，比如更新内容等
  };

  // 获取数据
  const [orderList, setOrderList] = useState<DataType[]>([]);
  const FeachList = async () => {
    const {
      data: { code, msg, orderList },
    } = await axios.get("/api/orderlist");
    if (code === 200) {
      setOrderList(orderList);
    }
  };

  useEffect(() => {
    FeachList();
  }, []);

  const [isExpanded, setIsExpanded] = useState(false); // 状态管理，用于追踪按钮是否展开

  const toggleButton = () => {
    setIsExpanded(!isExpanded); // 切换状态
  };

  // 创建设计的弹框显示隐藏
  const [modalVisible, setModalVisible] = useState(false);

  const handleCreateDesignClick = () => {
    setModalVisible(true);
  };

  const handleModalCancel = () => {
    setModalVisible(false);
  };

  const [currentIndexd, setCurrentIndexd] = useState(0);

  const handleLeftClickd = () => {
    if (currentIndexd > 0) {
      setCurrentIndexd(currentIndexd - 4);
    }
  };

  const handleRightClickd = () => {
    if (currentIndexd < images.length - 1) {
      setCurrentIndexd(currentIndexd + 4);
    }
  };

  return (
    <div id="box">
      {/* 搜索框 /轮播图*/}
      <div className="box-seach-lunbo">
        <div
          id="inp"
          style={{ background: "#fff", borderRadius: "10px", width: "755px" }}
        >
          <Input
            addonBefore="🔍️"
            addonAfter={selectAfter}
            placeholder="中秋节"
            style={{ width: "750px", margin: "0px 5px" }}
            onClick={() => navigate("/care")}
          />
        </div>
        {/* <SearchBox></SearchBox> */}
        <Carousel autoplay>
          <div className="div">
            <h3 style={contentStyle}>
              <img
                src="https://gaoding-market.dancf.com/market-operations/market/side/6e535acddf964a58a3efc627079b7fa3/1725594093077.png?x-oss-process=image/resize,h_140,type_6/sharpen,120/interlace,1/format,webp"
                alt=""
              />
            </h3>
          </div>
          <div className="div">
            <h3 style={contentStyle}>
              <img
                src="https://img0.baidu.com/it/u=1938968238,4191774149&fm=253&fmt=auto&app=138&f=JPEG?w=839&h=500"
                alt=""
              />
            </h3>
          </div>
          <div className="div">
            <h3 style={contentStyle}>
              <img
                src="https://img1.baidu.com/it/u=2660338312,3726661300&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
                alt=""
              />
            </h3>
          </div>
          <div className="div">
            <h3 style={contentStyle}>
              <img
                src="https://img2.baidu.com/it/u=2299232866,879642408&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                alt=""
              />
            </h3>
          </div>
        </Carousel>
      </div>
      <div className="box-con">
        <Carousel arrows infinite={false} className="box-con-carousel">
          <div>
            <ul>
              <li>
                <p style={{ color: "#fff" }}>精选推荐</p>
                <span style={{ color: "#91aeff" }}>RECOMMEND</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>小红书</p>
                <span>REDNOTE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>公众号</p>
                <span>WECHAT</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>电商</p>
                <span>E-COMMERCE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>教育培训</p>
                <span>EDUCATION</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>短视频</p>
                <span>VIDEO</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>金融保险</p>
                <span>FINANCE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>政务媒体</p>
                <span>GOVMEDIA</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>粉丝应援</p>
                <span>SUPPORT</span>
              </li>
            </ul>
          </div>
          <div>
            <ul>
              <li style={{ background: "#f5f6f8" }}>
                <p>粉丝应援</p>
                <span>SUPPORT</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>个人生活</p>
                <span>LIFE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>设计师</p>
                <span>DESIGNER</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>门店</p>
                <span>STORE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>电竞运营</p>
                <span>ESPORTS</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>社群发圈</p>
                <span>GROUP</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>企业行政</p>
                <span>ENTERPRISE</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>微商</p>
                <span>BUSINESS</span>
              </li>
              <li style={{ background: "#f5f6f8" }}>
                <p>销售</p>
                <span>SALE</span>
              </li>
            </ul>
          </div>
        </Carousel>
      </div>
      {/* 常用工具 */}
      <div className="box-cons">
        <div className="box-cons-zuo">
          <h4 style={{ height: "50px", display: "flex", alignItems: "center" }}>
            <p style={{ flex: "1", fontSize: "18px", marginLeft: "10px" }}>
              常用工具
            </p>
            <span className="hover-effect">更多&gt;</span>
          </h4>
          <div>
            <ul>
              <li onClick={handleCreateDesignClick}>
                <PlusOutlined />
                创建设计
              </li>
              <li>
                <MacCommandOutlined />
                AI设计
              </li>
              <li>
                <PictureOutlined />
                AI绘图
              </li>
              <li>
                <SignatureOutlined />
                AI素材
              </li>
              <li>
                <TranslationOutlined />
                AI文案
              </li>
              <li>
                <SmileOutlined />
                批量抠人像
              </li>
              <li>
                <ShoppingOutlined />
                批量抠商品
              </li>
              <li>
                <OpenAIOutlined />
                图片编辑
              </li>
            </ul>
          </div>
        </div>
        <div className="box-cons-you">
          <h4 style={{ height: "30px", display: "flex", alignItems: "center" }}>
            <p style={{ flex: "1", fontSize: "18px", marginLeft: "10px" }}>
              常用物料
            </p>
            <span className="hover-effect">更多&gt;</span>
          </h4>
          <div className="box-cons-you-div">
            <div
              id="content"
              style={{
                transform: `translateX(-${(currentIndex / 4) * 100}%)`,
                transition: "transform 0.5s ease",
              }}
            >
              {images.map((image, index) => (
                <dl
                  key={index}
                  className={`image-item ${
                    index === currentIndex ? "active" : ""
                  }`}
                >
                  <dd>{image.description}</dd>
                  <dt>
                    <img src={image.src} alt={image.description} />
                  </dt>
                </dl>
              ))}
            </div>
            <Button
              id="left"
              onClick={handleLeftClick}
              disabled={currentIndex === 0}
            >
              &lt;
            </Button>
            <Button
              id="right"
              onClick={handleRightClick}
              disabled={currentIndex === images.length - 4}
            >
              &gt;
            </Button>
          </div>
        </div>
        <Modal
          title="创建设计"
          open={modalVisible}
          onCancel={handleModalCancel}
        >
          <div
            style={{
              width: "300px",
              marginTop: "10px",
              display: "flex",
              flexDirection: "column",
            }}
          >
            <header style={{ width: "300px", height: "50px" }}>
              <Input
                size="large"
                placeholder="搜索全部尺寸"
                prefix={<SearchOutlined />}
                style={{ margin: "5px 10px", width: "90%" }}
              />
            </header>
            <main style={{ width: "300px", flex: "1", overflowY: "scroll" }}>
              {/* 自定义尺寸 */}
              <div>
                <p style={{ margin:'5px 0px',marginLeft: "10px", }}>自定义尺寸</p>
                {/* 宽/高/单位 */}
                <div style={{ display:'flex',alignItems:'center',justifyContent:'space-around' }}>
                  <Space style={{ flex:'1' }}>
                    <Space.Compact size="large">
                      <Input placeholder="宽" />
                      <Input placeholder="高" />
                      <Button><RetweetOutlined /></Button>
                    </Space.Compact>
                  </Space>
                  <Cascader options={options} onChange={onChange} placeholder="px" style={{ width:'0px' }} />
                  <Button style={{ width:'50px' }}>创建</Button>
                </div>
              </div>
              {/* 我的尺寸 */}
              <div>
                <p style={{ margin:'5px 0px',marginLeft: "10px", }}>我的尺寸<span style={{ marginLeft:"190px" }}>+</span></p>
                {/* 暂无数据 */}
                <Button type="dashed" style={{ marginLeft:'10px',width:"93%" }}>暂无内容</Button>
              </div>
              {/* 系统推荐尺寸 */}
              <div id="Component">
                <p style={{height:'20px', margin:'5px 0px',marginLeft: "10px",position: 'sticky',top:'0',background:'#fff' }}>系统推荐尺寸</p>
                <ul>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695020147.png" alt="" />
                    <p>手机海报</p>
                    <span>1242 x 2208 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695422494.png" alt="" />
                    <p>横版海报</p>
                    <span>900 x 500 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695703630.png" alt="" />
                    <p>小红书配图</p>
                    <span>1242 x 1656 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695037988.png" alt="" />
                    <p>公众号首图</p>
                    <span>900 x 383 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695037988.png" alt="" />
                    <p>公众号次图</p>
                    <span>500 x 500 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695567787.png" alt="" />
                    <p>文章长图</p>
                    <span>1000 x 1500 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695060231.png" alt="" />
                    <p>PPT（16:9）</p>
                    <span>1920 x 1080 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718695807832.png" alt="" />
                    <p>竖版直播背景</p>
                    <span>1242 x 2690 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699231819.png" alt="" />
                    <p>竖版视频封面</p>
                    <span>1242 x 2208 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699231819.png" alt="" />
                    <p>横版视频封面</p>
                    <span>1920 x 1080 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699391630.png" alt="" />
                    <p>商品主图</p>
                    <span>800 x 800 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699447755.png" alt="" />
                    <p>电商详情页</p>
                    <span>750 x 1000 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>PC端店铺首页</p>
                    <span>1920 x 150 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>手机端店铺首页</p>
                    <span>750 x 1000 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>店招</p>
                    <span>1920 x 150 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>电商横版海报</p>
                    <span>750 x 390 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>电商竖版海报</p>
                    <span>750 x 950 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699563350.png" alt="" />
                    <p>电商全屏海报</p>
                    <span>1920 x 700 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699836419.png" alt="" />
                    <p>日签</p>
                    <span>1242 x 2208 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718699878517.png" alt="" />
                    <p>小程序封面</p>
                    <span>520 x 416 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700070590.png" alt="" />
                    <p>名片</p>
                    <span>96 x 60 px</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700137186.png" alt="" />
                    <p>张贴海报</p>
                    <span>426 x 576 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700197219.png" alt="" />
                    <p>2m易拉宝</p>
                    <span>80 x 200 cm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700258587.png" alt="" />
                    <p>1.8m展架</p>
                    <span>80 x 180 cm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700313613.png" alt="" />
                    <p>优惠劵</p>
                    <span>186 x 66 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700358289.png" alt="" />
                    <p>门票</p>
                    <span>206 x 86 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700426540.png" alt="" />
                    <p>证件照</p>
                    <span>25 x 35 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700490241.png" alt="" />
                    <p>A3</p>
                    <span>297 x 420 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700525573.png" alt="" />
                    <p>A4</p>
                    <span>210 x 297 mm</span>
                  </li>
                  <li>
                    <img src="https://st0.dancf.com/market-operations/market/side/1718700578503.png" alt="" />
                    <p>A5</p>
                    <span>148 x 210 mm</span>
                  </li>
                </ul>
              </div>
            </main>
            <footer style={{ width: "300px", height: "100px",display:'flex',flexDirection:'column' }}>
            <div style={{ width:'100%',height: "20px", display: "flex",lineHeight:'30px' }}>
            <p style={{ flex: "1", fontSize: "16px", marginLeft: "10px" }}>
              推荐工具
            </p>
            <span className="footer-span">查看全部</span>
          </div>
          <div className="footer-div">
            <div
              id="contents"
              style={{
                transform: `translateX(-${(currentIndexd / 4) * 100}%)`,
                transition: "transform 0.5s ease",
              }}
            >
              {images.map((image, index) => (
                <dl
                  key={index}
                  className={`image-item ${
                    index === currentIndexd ? "active" : ""
                  }`}
                >
                  <dt>
                    <img src={image.src} alt={image.description} />
                  </dt>
                  <dd>{image.description}</dd>
                </dl>
              ))}
            </div>
            <Button
              id="zuo-left"
              onClick={handleLeftClickd}
              disabled={currentIndexd === 0}
            >
              &lt;
            </Button>
            <Button
              id="you-right"
              onClick={handleRightClickd}
              disabled={currentIndexd === images.length - 4}
            >
              &gt;
            </Button>
          </div>
            </footer>
          </div>
        </Modal>
      </div>
      {/* 编辑推荐 */}
      <div className="Editors-Choice">
        <div className="Editors-Choice-zuo">
          <h4
            style={{
              height: "50px",
              display: "flex",
              alignItems: "center",
              marginTop: "5px",
            }}
          >
            <p style={{ flex: "1", fontSize: "18px", marginLeft: "10px" }}>
              编辑推荐
            </p>
          </h4>
          <div>
            <dl>
              <dt>
                <img
                  src="https://gd-filems.dancf.com/gaoding/gaoding/53357/20a37242-175e-4b9d-92bf-cdb8a6ef3dbb81129.jpg?x-oss-process=image/resize,w_88,type_6/sharpen,120/interlace,1/format,webp"
                  alt=""
                />
              </dt>
              <dd>
                <h5>每日·新品推荐</h5>
                <span>10W+质感模版</span>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://gd-filems.dancf.com/gaoding/gaoding/59803/ed48a58a-d6ba-4ae0-9a93-e24757ea4f3055149.jpg?x-oss-process=image/resize,w_88,type_6/sharpen,120/interlace,1/format,webp"
                  alt=""
                />
              </dt>
              <dd>
                <h5>精选·小红书爆款封面</h5>
                <span>「旅游圈层图」一键套用&gt;&gt;</span>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://gd-filems.dancf.com/gaoding/gaoding/53357/2ba8d2c3-515a-4fc5-bf2b-2808b707bfad119016.jpg?x-oss-process=image/resize,w_156,type_6/sharpen,120/interlace,1/format,webp"
                  alt=""
                />
              </dt>
              <dd>
                <h5>精选·商品主图</h5>
                <span>电商人必备，现成可直用&gt;&gt;</span>
              </dd>
            </dl>
          </div>
        </div>
        <div className="Editors-Choice-you">
          <h4 style={{ height: "50px", display: "flex", alignItems: "center" }}>
            <p style={{ flex: "1", fontSize: "18px", marginLeft: "10px" }}>
              热点日历
            </p>
            <span className="hover-effect">更多&gt;</span>
          </h4>
          <div className="Editors-Choice-box">
            <YourComponent></YourComponent>
            <div className="Editors-Choice-boxzuo">
              <dl>
                <dd>
                  <h4
                    style={{
                      color: "#c97901",
                      marginTop: "20px",
                      marginLeft: "20px",
                    }}
                  >
                    中秋节
                  </h4>
                  <p
                    style={{
                      color: "#eacc9e",
                      marginLeft: "20px",
                      marginTop: "10px",
                    }}
                  >
                    09.17 周二
                  </p>
                  <Button
                    style={{
                      color: "#dca85a",
                      marginTop: "20px",
                      marginLeft: "20px",
                      background: "#fdf9f5",
                      border: "none",
                    }}
                  >
                    <span style={{ color: "#c97900", fontWeight: "bold" }}>
                      3
                    </span>
                    天前
                  </Button>
                </dd>
                <dt>
                  <img
                    src="https://img1.baidu.com/it/u=1117292986,1465452376&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
                    alt=""
                  />
                </dt>
              </dl>
            </div>
            <div className="Editors-Choice-boxyou">
              <>
                <dl>
                  <dd>
                    <h4
                      style={{
                        color: "#4e83eb",
                        marginTop: "20px",
                        marginLeft: "20px",
                      }}
                    >
                      全国爱牙日
                    </h4>
                    <p
                      style={{
                        color: "#95b4f3",
                        marginLeft: "20px",
                        marginTop: "10px",
                      }}
                    >
                      09.20 周五
                    </p>
                  </dd>
                  <dt>
                    <img
                      src="https://img2.baidu.com/it/u=4034556624,3712334504&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=434"
                      alt=""
                    />
                  </dt>
                </dl>
              </>
              <>
                <dl>
                  <dd>
                    <h4
                      style={{
                        color: "#c97900",
                        marginTop: "20px",
                        marginLeft: "20px",
                      }}
                    >
                      秋分
                    </h4>
                    <p
                      style={{
                        color: "#eccea3",
                        marginLeft: "20px",
                        marginTop: "10px",
                      }}
                    >
                      09.22 周日
                    </p>
                  </dd>
                  <dt>
                    <img
                      src="https://img2.baidu.com/it/u=1838307232,2409292274&fm=253&fmt=auto&app=138&f=JPEG?w=897&h=500"
                      alt=""
                    />
                  </dt>
                </dl>
              </>
            </div>
          </div>
          {/* <CalendarBox events={events} /> */}
        </div>
      </div>
      {/* 营销卖货 */}
      <div className="Marketing-sales">
        <PROMOTION dataList={Marketing} title="营销卖货" />
      </div>
      {/* 宣传推广 */}
      <div className="PROMOTION">
        <PROMOTION dataList={promotionData} title="宣传推广" />
      </div>
      {/* 科普攻略 */}
      <div className="Sciencepopularizationguide">
        <PROMOTION dataList={Sciencepopularizationguide} title="科普攻略" />
      </div>
      {/* 企业行政 */}
      <div className="Enterpriseadministration">
        <PROMOTION dataList={Enterpriseadministration} title="企业行政" />
      </div>
      {/* 通知公告 */}
      <div className="NoticeAnnouncement">
        <PROMOTION dataList={NoticeAnnouncement} title="通知公告" />
      </div>
      {/* 喜报战报 */}
      <div className="Goodnewswarreport">
        <PROMOTION dataList={Goodnewswarreport} title="喜报战报" />
      </div>
      {/* 生活娱乐 */}
      <div className="Lifestyleandentertainment">
        <PROMOTION dataList={Lifestyleandentertainment} title="生活娱乐" />
      </div>
      {/* 拓客引流 */}
      <div className="Expandingcustomerbaseandattractingtraffic">
        <PROMOTION
          dataList={Expandingcustomerbaseandattractingtraffic}
          title="拓客引流"
        />
      </div>
      {/* 意见反馈 */}
      <Button
        style={{
          marginLeft: "36%",
          marginTop: "-10px",
          background: "#e8eaec",
          border: "none",
        }}
      >
        对内容不满意？立即反馈给我们✏️
      </Button>
      {/* 今日推荐(瀑布流) */}
      <div id="Todaysrecommendation">
        <div
          className="Todaysrecommendation-Tab"
          style={{
            transform: `translateX(-${(currentIndexs / 5) * 20}%)`,
            transition: "transform 0.5s ease",
          }}
        >
          <ul>
            {[
              "今日推荐",
              "动态海报",
              "LOGO",
              "商品主图",
              "产品营销",
              "促销活动",
              "知识科普",
              "手机海报",
              "活动宣传",
              "小红书配图",
              "公众号首图",
              "长图海报",
              "PPT",
              "电商海报",
              "视频模版",
              "喜报",
              "公众号次图",
              "主图图标",
              "视频封面",
              "横版海报",
              "简历",
            ].map((tab) => (
              <li
                key={tab}
                className={activeTab === tab ? "active" : ""}
                onClick={() => handleTabChange(tab)}
              >
                {tab}
              </li>
            ))}
          </ul>
        </div>
        <Button
          id="zuo"
          onClick={handleLeftClicks}
          disabled={currentIndexs === 0}
        >
          &lt;
        </Button>
        <Button
          id="you"
          onClick={handleRightClicks}
          disabled={currentIndexs === images.length - 5}
        >
          &gt;
        </Button>
        {/* Tab切换内容 */}
        <div className="Todaysrecommendation-content">
          {/* 根据activeTab的值来渲染不同的内容 */}
          {/* 这里可以添加每个Tab对应的内容 */}
          <div style={{ columnCount: 4, breakInside: "avoid" }}>
            {orderList.length > 0 &&
              activeTab === "今日推荐" &&
              orderList.map((item, ind) => (
                <dl key={ind}>
                  <dt>
                    <LazyImage src={item.img} alt="" />
                  </dt>
                  <dd style={{ color: "#fff", height: "30px" }}>{item.word}</dd>
                </dl>
              ))}
            {orderList.length > 0 &&
              activeTab &&
              orderList.map((item, ind) => (
                <dl key={ind}>
                  <dt>
                    <LazyImage src={item.img} alt="" />
                  </dt>
                  <dd style={{ color: "#fff" }}>{item.word}</dd>
                </dl>
              ))}
            {orderList.length > 0 &&
              activeTab === "LOGO" &&
              orderList.map((item, ind) => (
                <dl key={ind}>
                  <dt>
                    <LazyImage src={item.img} alt="" />
                  </dt>
                  <dd style={{ color: "#fff", height: "30px" }}>{item.word}</dd>
                </dl>
              ))}
          </div>
        </div>
      </div>
      {/* 底部 */}
      <div className="dibubutton">
        <div className="dibubutton-con">
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>服务导航</li>
            <li>
              <a href="">设计模版</a>
            </li>
            <li>
              <a href="">设计素材</a>
            </li>
            <li>
              <a href="">稿定AI</a>
            </li>
          </ul>
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>热门工具</li>
            <li>
              <a href="">智能设计</a>
            </li>
            <li>
              <a href="">智能抠图</a>
            </li>
            <li>
              <a href="">图片在线编辑</a>
            </li>
            <li>
              <a href="">在线拼图</a>
            </li>
          </ul>
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>热门设计</li>
            <li>
              <a href="">节日热点日历</a>
            </li>
            <li>
              <a href="">个人形象设计</a>
            </li>
            <li>
              <a href="">粉丝应援</a>
            </li>
            <li>
              <a href="">设计专题</a>
            </li>
          </ul>
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>热门模版</li>
            <li>
              <a href="">海报设计模版</a>
            </li>
            <li>
              <a href="">PPT模版</a>
            </li>
            <li>
              <a href="">简历模版</a>
            </li>
            <li>
              <a href="">邀请函模版</a>
            </li>
            <li>
              <a href="">工作证模版</a>
            </li>
          </ul>
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>热门素材</li>
            <li>
              <a href="">平面模版素材</a>
            </li>
            <li>
              <a href="">图片素材</a>
            </li>
            <li>
              <a href="">免抠素材</a>
            </li>
            <li>
              <a href="">视频模版素材</a>
            </li>
          </ul>
          <ul>
            <li style={{ fontWeight: "bold", fontSize: "18px" }}>拓展服务</li>
            <li>
              <a href="">开放平台</a>
            </li>
            <li>
              <a href="">屏幕营销</a>
            </li>
            <li>
              <a href="">设计师招募</a>
            </li>
            <li>
              <a href="">设计定制</a>
            </li>
          </ul>
        </div>
        <ul className="dibubutton-cons">
          <li>
            <a href="">城市风景图片</a>
          </li>
          <li>
            <a href="">天空图片</a>
          </li>
          <li>
            <a href="">冬天的风景</a>
          </li>
          <li>
            <a href="">怎么拼接图片</a>
          </li>
          <li>
            <a href="">制作动态表情包</a>
          </li>
          <li>
            <a href="">推文怎么做</a>
          </li>
          <li>
            <a href="">老年人头像微信头像</a>
          </li>
          <li>
            <Button type="text" onClick={toggleButton}>
              {isExpanded ? <UpOutlined /> : <DownOutlined />}
            </Button>
          </li>
        </ul>
        <div className="dibubutton-box">
          <div className="dibubutton-box-zuo">
            <ul>
              <li>
                <Space wrap>
                  <Popover content={content} title="" trigger="hover">
                    <Button>
                      <MobileOutlined />
                    </Button>
                  </Popover>
                </Space>
              </li>
              <li>
                <Space wrap>
                  <Popover content={content} title="" trigger="focus">
                    <Button>
                      <DesktopOutlined />
                    </Button>
                  </Popover>
                </Space>
              </li>
              <li>
                <Space wrap>
                  <Popover content={contents} title="" trigger="hover">
                    <Button>
                      <NodeIndexOutlined />
                    </Button>
                  </Popover>
                </Space>
              </li>
            </ul>
          </div>
          <div className="dibubutton-box-you">
            <ul
              className="wendan"
              style={{
                display: "flex",
                justifyContent: "space-around",
                height: "30px",
                alignItems: "center",
              }}
            >
              <li>关于稿定</li>
              <li>稿定设计</li>
              <li>加入我们</li>
              <li>用户协议</li>
              <li>隐私策略</li>
              <li>授权协议</li>
              <li>帮助中心</li>
              <li>
                <Space wrap>
                  <Popover content={gongneng} title="" trigger="hover">
                    <Button style={{ border: "none", background: "none" }}>
                      功能介绍
                    </Button>
                  </Popover>
                </Space>
              </li>
              <li>
                <Space wrap>
                  <Popover content={youqing} title="" trigger="hover">
                    <Button style={{ border: "none", background: "none" }}>
                      友情链接
                    </Button>
                  </Popover>
                </Space>
              </li>
              <li>最新文章</li>
              <li>意见反馈</li>
            </ul>
            <ul
              className="banben"
              style={{
                display: "flex",
                justifyContent: "space-around",
                flex: "1",
                alignItems: "center",
                fontSize: "12px",
              }}
            >
              <li>
                <a href="">闽ICP备18003982号-2</a>
              </li>{" "}
              |
              <li>
                <a href="">网信算备350203997384601240023号</a>
              </li>{" "}
              |
              <li>
                <a href="">网信算备350203997384601240015号</a>
              </li>{" "}
              |<li>©2017 - 2024 稿定 (厦门) 科技有限公司</li> |
              <li>版本号：iOS:5.1.1 Android:5.1.1</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
